<template>
  <div class="hello">
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      containerWidth: 0,
      containerHeight: 0,
    };
  },
  mounted() {
    // 在组件挂载后计算父级容器的尺寸并监听窗口大小变化
    this.updateContainerSize();
    window.addEventListener('resize', this.updateContainerSize);
  },
  beforeDestroy() {
    // 在组件销毁前移除窗口大小变化的监听
    window.removeEventListener('resize', this.updateContainerSize);
  },
  methods: {
    updateContainerSize() {
      // 获取父级容器的宽度和高度
      const parent = this.$el.parentElement;
      this.containerWidth = parent.clientWidth;
      this.containerHeight = parent.clientHeight;
      console.log(this.containerHeight,this.containerWidth);
      
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello{
    width: 100px;
    height: 100px;
    background: lightcoral;
  }
</style>
